<template>
  <div id="PersonInBox">
    <el-row>
      <el-col :span="4" :offset="3">
        <div class="div_border_title">
          <h2 v-if="type==='invitation'">我收到的邀请函</h2>
          <h2 v-else>我收到的面试通知</h2>
        </div>
      </el-col>
      <el-col :span="16" :offset="3">
        <MyInterview v-if="type==='invitation'"></MyInterview>
        <MyInvitation v-else></MyInvitation>
      </el-col>
      <el-col :span="2" class="button">
        <el-row>
          <el-col class="border">
            <div class="menu-item" @click="Click('invitation')">
              <i class="fa fa-envelope-o fa-2x"></i>
              <p>邀请函</p>
            </div>
          </el-col>
          <el-col class="border">
            <div class="menu-item" @click="Click('interview')">
              <i class="fa fa-twitch fa-2x"></i>
              <p>面试通知</p>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import MyInterview from '@/components/personInBox/MyInterview'
  import MyInvitation from '@/components/personInBox/MyInvitation'
  import InterviewList from '@/components/personInBox/InterviewList'
  import InvitationList from '@/components/personInBox/InvitationList'

  export default {
    name: 'PersonInBox',
    data () {
      return {
        type: ''
      }
    },
    created () {
      this.type = this.$route.params.type
    },
    methods: {
      refrush (state) {
        if (state === true) {
          this.$router.go(0)
        }
      },
      Click (type) {
        this.type = type
        // this.$router.push({path:'/personinbox/'+type});
      }
    },
    components: {
      MyInterview,
      MyInvitation,
      InterviewList,
      InvitationList
    }
  }
</script>

<style scoped>
  #PersonInBox {
    margin-top: 2em;
  }

  .listdata {
    margin-top: 1em;
    min-height: 25em;
  }

  .button {
    margin-top: 4em;
    margin-left: 2em;
  }

  .border {
    margin: 0.3em;
  }

  .menu-item {
    background: #FAFAFA;
    border: 1px solid #F2F2F2;
    padding: 10px;
    text-align: center;
    color: #999;
  }

  .menu-item:hover {
    color: #20A0FF;
    background: #fff;
    border: 1px solid #e8e8e8;
  }
</style>
